<script setup lang="ts">
import { OrderStatus } from '@/enum'
import type { recordList } from '@/types/consult'
// import { ref } from 'vue'
import { useShowPrescription, useOpeBtn } from '@/composable'
const props = defineProps<{
  item: recordList
}>()

// 关于订单的状态分为五种情况
// 1. 咨询中 => 按钮显示（查看处方和继续沟通）
// 2. 已完成 => 按钮提示（更多(查看处方，删除订单)，问诊记录和去评价 | 查看评价）
// 3. 已取消 => 按钮显示（删除订单和咨询其他医生）
// 4. 待接诊 => 按钮提示（取消问诊和继续沟通）
// 5. 待支付 => 按钮提示（取消问诊和去支付）
const emits = defineEmits<{
  (e: 'delOrder', id: string): void
}>()

// 删除订单
// 点击删除订单，需要将订单从服务器中删除
const { opeLoading, orderbtn } = useOpeBtn()
const delOpe = () => {
  orderbtn('del', props.item.id)
  emits('delOrder', props.item.id)
}
// 取消订单
// 取消待接诊的订单
// const { cancelLoading, cancelOrderBtn } = useCancelBtn()
const cancelOpe = () => {
  orderbtn('cancel', props.item.id)
  emits('delOrder', props.item.id)
}
// 查看处方
const { showPrescription } = useShowPrescription()
</script>

<template>
  <div class="record-item-page">
    <van-nav-bar class="head">
      <template #left>
        <img width="20" src="@/assets/avatar-doctor.svg" alt="" />
        <p class="title">
          <span>{{ item.docInfo?.name || '自动分配医生' }}</span>
        </p>
      </template>
      <template #right>
        <p
          :class="{
            orange: item.status === OrderStatus.ConsultPay,
            primary: item.status === OrderStatus.ConsultChat
          }"
        >
          {{ item.statusValue }}
        </p>
      </template>
    </van-nav-bar>
    <div
      class="body"
      @click="$router.push({ name: 'ConsultDetail', params: { id: item.id } })"
    >
      <van-row align="center">
        <van-col :span="5" class="title">病情描述</van-col>
        <van-col class="desc">{{ item.illnessDesc }}</van-col>
      </van-row>
      <van-row align="center">
        <van-col :span="5" class="title">价格</van-col>
        <van-col>￥{{ item.payment }}</van-col>
      </van-row>
      <van-row align="center">
        <van-col :span="5" class="title">创建时间</van-col>
        <van-col class="createTime">{{ item.createTime }}</van-col>
      </van-row>
    </div>
    <div class="foot">
      <template v-if="item.status === OrderStatus.ConsultCancel">
        <van-button
          size="small"
          round
          @click="delOpe"
          :loading="opeLoading"
          class="done"
          >删除订单</van-button
        >
        <van-button
          class="second"
          type="primary"
          size="small"
          round
          plain
          @click="$router.push({ name: 'home' })"
          >咨询其他医生</van-button
        ></template
      >
      <template v-else-if="item.status === OrderStatus.ConsultPay">
        <van-button
          size="small"
          round
          @click="cancelOpe"
          class="done"
          :loading="opeLoading"
          >取消问诊</van-button
        >
        <van-button
          class="second"
          type="primary"
          size="small"
          round
          plain
          @click="
            $router.push({ name: 'ConsultDetail', params: { id: item.id } })
          "
          >去支付</van-button
        ></template
      >
      <template v-else-if="item.status === OrderStatus.ConsultWait">
        <van-button
          size="small"
          round
          :loading="opeLoading"
          @click="cancelOpe"
          class="done"
          >取消问诊</van-button
        >
        <van-button
          class="second"
          type="primary"
          size="small"
          round
          plain
          @click="
            $router.push({
              name: 'ConsultRoom',
              query: { orderId: item.id, payResult: 1 }
            })
          "
          >继续沟通</van-button
        ></template
      >
      <template v-else-if="item.status === OrderStatus.ConsultComplete">
        <div class="more">
          <DP-More :order-detail="item"></DP-More>
          <div class="right">
            <van-button
              size="small"
              round
              class="done"
              @click="
                $router.push({
                  name: 'ConsultRoom',
                  query: { orderId: item.id, payResult: 1 }
                })
              "
              >问诊记录</van-button
            >
            <van-button
              v-if="item.evaluateId"
              class="second done"
              type="primary"
              size="small"
              round
              plain
              >查看评价</van-button
            >
            <van-button
              v-else
              class="second"
              type="primary"
              size="small"
              round
              plain
              @click="
                $router.push({
                  name: 'ConsultRoom',
                  query: { orderId: item.id, payResult: 1 }
                })
              "
              >去评价</van-button
            >
          </div>
        </div>
      </template>
      <template v-else-if="item.status === OrderStatus.ConsultChat">
        <van-button
          size="small"
          round
          class="done"
          v-if="item.prescriptionId"
          @click="showPrescription(item.prescriptionId)"
          >查看处方</van-button
        >
        <van-button
          size="small"
          round
          class="done"
          v-else
          @click="
            $router.push({
              name: 'ConsultRoom',
              query: { orderId: item.id, payResult: 1 }
            })
          "
          >问诊记录</van-button
        >
        <van-button
          class="second"
          type="primary"
          size="small"
          round
          plain
          @click="
            $router.push({
              name: 'ConsultRoom',
              query: { orderId: item.id, payResult: 1 }
            })
          "
          >继续沟通</van-button
        >
      </template>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.record-item-page {
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #fff;
  height: 193.5px;
  box-sizing: border-box;
  border-radius: 5px;
  .head {
    height: 50px;
    font-size: 15px;
    .title {
      padding-left: 10px;
      font-weight: 500;
    }
    ::v-deep() {
      .van-nav-bar__right {
        color: var(--cp-text2);
        font-size: 13px;
        .orange {
          color: #e9b47f;
        }
        .primary {
          color: var(--cp-primary);
        }
      }
    }
  }
  .body {
    padding: 13px 16px;
    .van-row {
      margin-bottom: 7px;
      height: 17.5px;
    }
    .title {
      color: var(--cp-tip);
      font-size: 13px;
    }
    .createTime {
      color: var(--cp-tip);
      font-size: 13px;
      height: 100%;
      vertical-align: middle;
      line-height: 17.5px;
    }
  }
  .foot {
    display: flex;
    justify-content: end;
    margin: 0 15px;
    cursor: grab;
    font-size: 12px;
    height: 32px;
    .van-button {
      padding: 0 15px;
      height: 100%;
    }
    .second {
      margin-left: 16px;
    }
    .footer-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 16px;
    }
    .more {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: space-between;
      .right {
        height: 100%;
      }
    }
    .done {
      color: var(--cp-text3);
      background-color: var(--cp-bg);
      border: unset;
    }
  }
}
</style>
